<template>
	<div style='position:relative;'>
		<!-- <div class='tips' :style='{width: canWidth, lineHeight: canHeight}'
			v-show='!hasImg'>请上传图片</div> -->
		<input type='file' @change='chooseImg'
			@click='checkFileReader'/>
		<canvas ref='canvas' id='canvas' :style='{width: canWidth, height: canHeight}'></canvas>
		<el-button @click='onSure'>
			确定
		</el-button>
		<img :src='newImg' />
	</div>
</template>

<script>
	import {cbs} from '../../../config/settings.js';
	let img = new Image;
	module.exports = {
		data() {
			return {
				fileReaderFlag: true,
				hasImg: false,
				// canLeft: 0,
				// canTop: 0,
				canvasBox: {
					w: parseInt(this.canWidth),
					h: parseInt(this.canHeight)
				},
				isMouseMove: false,
				startPos: {
					x: 0,
					y: 0
				},
				sourceImgPos: {
					x: 0,
					y: 0,
					w: 0,
					h: 0,
				},
				newImg: ''
			}
		},
		props: {
			canWidth: {
				type: String,
				default: '800px'
			},
			canHeight: {
				type: String,
				default: '450px'
			}
		},
		methods: {
			/*
			 * 检测FileReader
			 */
			checkFileReader() {
				if(!this.fileReaderFlag || !window.FileReader) {
					cbs.submitError.call(this, `您的浏览器不支持FileReader，建议使用Chrome浏览器`);
					this.fileReaderFlag = false;
				}
			},
			/*
			 * 选择图片
			 */
			chooseImg(e) {
				if(!this.fileReaderFlag) {
					return;
				}

				let file = e.target.files[0];

				let reader = new FileReader();
				reader.onload = () => {
					img.src = reader.result;
					img.onload = () => {
						this.hasImg = true;
						this.sourceImgPos.w = img.width;
						this.sourceImgPos.h = img.height;
						this.ctx.drawImage(img, 0, 0);
					}
				}
				reader.readAsDataURL(file)
			},
			/*
			 * 拖动图片
			 */
			dragImg(e) {
				console.log('x ' + e.clientX)
				console.log('y ' + e.clientY)
			},
			/*
			 * canvas绑定mouse事件
			 */
			bindEvent() {
				this.$refs.canvas.addEventListener('mouseup', this.mouseUp);
				this.$refs.canvas.addEventListener('mousemove', this.mouseMove);
				this.$refs.canvas.addEventListener('mousedown', this.mouseDown);
			},
			mouseDown(e) {
				if(!this.hasImg) {
					return;
				}
				this.isMouseMove = true;
				this.startPos.x = e.clientX;
				this.startPos.y = e.clientY; 
			},
			mouseMove(e) {
				if(!this.hasImg || !this.isMouseMove) {
					return;
				}

			},
			mouseUp(e) {
				if(!this.hasImg) {
					return;
				}
				this.isMouseMove = false;
				
				this.ctx.clearRect(0, 0, this.canvasBox.w, this.canvasBox.h)
				this.sourceImgPos.x = this.sourceImgPos.x - (e.clientX - this.startPos.x);
				this.sourceImgPos.y = this.sourceImgPos.y - (e.clientY - this.startPos.y);

				this.ctx.drawImage(img, this.sourceImgPos.x, this.sourceImgPos.y, this.sourceImgPos.w,  this.sourceImgPos.h, 0, 0, this.canvasBox.w, this.canvasBox.h);
			},
			onSure() {
				this.newImg = this.$refs.canvas.toDataURL();
				// console.log(this.newImg)
			}
		},
		computed: {
			ctx() {
				return this.$refs.canvas.getContext('2d');
			}
		},
		mounted() {
			this.bindEvent();
		}
	}
</script>

<style scoped lang='less'>
	.file,
	.tips {
		position: absolute;
		top: 0;
		left: 0;
		margin: 0px;
	}
	.file {
		opacity: 0;
	}
	canvas {
		border: 1px solid red;
	}
</style>